<style scoped lang="stylus">
</style>

<template>
    <div>
        <el-pagination
            background
            layout="prev, pager, next, sizes"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            :current-page="pageNum"
            :total="total"
            @current-change="onPageChanged"
            @size-change="onPageSizeChanged"
        >
        </el-pagination>
        <el-table
            :data="tableData"
            :border="false"
            style="width: 100%">

            <el-table-column
                prop="id"
                label="数据库主键ID"
                width="70"
                align="center"
                fixed="left">
            </el-table-column>

            <!--<el-table-column-->
            <!--    fixed="left"-->
            <!--    label="序号"-->
            <!--    type="index"-->
            <!--    width="50"-->
            <!--    align="center">-->
            <!--    <template v-slot="scope">-->
            <!--        <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>-->
            <!--    </template>-->
            <!--</el-table-column>-->

            <el-table-column
                prop="origFileName"
                label="文件"
                width="280"
                fixed="left">
                <template v-slot="scope">
                    <el-link type="primary" underline :href="`${scope.row.url}`">
                        <i class="el-icon-document" />
                        {{scope.row.origFileName}}
                    </el-link>
                </template>
            </el-table-column>

            <el-table-column
                prop="fileLengthWithUnit"
                label="文件长度"
                width="80">
            </el-table-column>

            <el-table-column
                sortable
                prop="dateUploaded"
                label="发布日期"
                width="160">
            </el-table-column>

            <!--<el-table-column-->
            <!--    sortable-->
            <!--    prop="uploaderName"-->
            <!--    label="上传人"-->
            <!--    width="90">-->
            <!--</el-table-column>-->

            <!--<el-table-column-->
            <!--    prop="url"-->
            <!--    label="下载地址"-->
            <!--    width="300">-->
            <!--    <template v-slot="scope">-->
            <!--        <el-link type="primary" underline :href="`${scope.row.url}`">-->
            <!--            <i class="el-icon-download" />-->
            <!--            {{scope.row.url}}-->
            <!--        </el-link>-->
            <!--    </template>-->
            <!--</el-table-column>-->

            <el-table-column
                label="操作"
                width="360"
                align="center">
                <template v-slot="scope">
                    <el-button @click="preview(scope.row)" type="primary" disabled size="mini">预览&nbsp<i class="el-icon-view"/></el-button>
                    <el-button @click="edit(scope.row)" type="default" disabled size="mini">替换&nbsp<i class="el-icon-upload"/></el-button>
                    <el-button @click="markAsDeleted(scope.row)" type="danger" disabled size="mini">删除&nbsp<i class="el-icon-delete"/></el-button>
                </template>
            </el-table-column>
        </el-table>


    </div>
</template>

<script>
// sessionStorage persistence
const SAVED_PAGE_NUM = "file_index__saved_page_num";
const savedPageNum = {
    fetch: function() {
        return JSON.parse(
            sessionStorage.getItem(SAVED_PAGE_NUM)
            || "1" // 约定前端UI页码从1开始, 后端页码从0开始
        );
    },
    save: function(val) {
        sessionStorage.setItem(SAVED_PAGE_NUM, JSON.stringify(val));
    }
};

const DEFAULT_ROWS_PER_PAGE = 5;
const SAVED_ROWS_PER_PAGE = "file_index__saved_rows_per_page";
const savedRowsPerPage = {
    fetch: function() {
        return JSON.parse(
            sessionStorage.getItem(SAVED_ROWS_PER_PAGE)
            || `${DEFAULT_ROWS_PER_PAGE}`
        );
    },
    save: function(val) {
        sessionStorage.setItem(SAVED_ROWS_PER_PAGE, JSON.stringify(val));
    }
};
export default {
    name: "FileIndex.vue",
    methods: {
        preview(row) {
            this.$router.push({
                path: '/preview_file',
                query:{
                    id: row.id
                }
            })
        },

        edit(row) {
            this.$router.push({
                path: '/edit_file',
                query:{
                    id: row.id
                }
            })
        },

        markAsDeleted(row){
            const _this = this;
            axios.delete('/file/delete?id='+row.id).then(function () {
                console.log('_this.nItemsOnCurrPage is', _this.nItemsOnCurrPage)
                if (_this.nItemsOnCurrPage <= 1 && _this.pageNum >= 2) {
                    _this.pageNum -= 1
                }
                _this.onPageChanged(_this.pageNum)
            }).then(function (resp) {
                _this.$alert('《'+row.name+'》删除成功!', '提示', {
                    confirmButtonText: '知道了',
                    callback: action => {
                        //动态刷新
                        _this.reload()//
                    }
                })
            });

            //this.reload()
        },

        onPageChanged(toPageNum) {
            this.pageNum = parseInt(toPageNum)
            savedPageNum.save(this.pageNum) // 注意约定UI页码从1开始(后端服务API页码从0开始)
            this.reload()
        },

        onPageSizeChanged(pageSizeVal) {
            //console.log(`每页 ${val} 条`);
            this.pageSize = parseInt(pageSizeVal)
            savedRowsPerPage.save(this.pageSize)
            this.pageNum = 1
            savedPageNum.save(this.pageNum)
            this.reload()
        },

        reload() {
            const _this = this;
            axios.get(`/files?size=${this.pageSize}&page=${this.pageNum-1}`).then(function (resp) {
                // console.log(resp)
                _this.tableData = resp.data.content;
                _this.total = resp.data.totalElements;
                _this.totalPages = resp.data.totalPages
                _this.nItemsOnCurrPage = resp.data.numberOfElements
            })
        }
    },

    created() {
        this.reload()
    },

    data() {
        return {
            pageNum: savedPageNum.fetch(), // 后端服务API约定页码从0开始
            pageSize: savedRowsPerPage.fetch(),
            total: 0,
            totalPages: 0,
            nItemsOnCurrPage: 0,
            tableData: null
        }
    }
}
</script>
